In this project, we were tasked with designing a flashcard app that contained the terms and definitions of different HTML and CSS terms. We were given 35 terms and definitions, and the rest was primarily left open to us. In addition, I wanted to include examples of the different terms.

I wanted to have a card that flips and is simple. As an artist, I tend to lean more into complex projects with lots of details/decorations. I wanted to simplify this project. I feel I met that, but I still maintained an enjoyment of what I was making despite splitting from my usual interests.

I spent a long time looking through flashcards and similar concepts, looking for ideas. I also wanted my cards to remain simpler and have a less illustrative design. Despite this, I still played around with many different concepts.

After discussing my sketches with my professor, we agreed that primarily primary colors and simple shapes would fit my goals and make a more concise design system. From there, I used Illustrator to better fill out my designs. Taking it a step further than my original design, I wanted the different shapes and buttons to appear to pop out of the background or look chiseled in. Another last minute change was made when switching from Gill Sans to Poppins font.

In the final build of my app, I thought I'd use pretty much what my med-fi wireframe was. However, it continued to change as I built my design using Adobe XD. I had to make all the different shapes and buttons and apply glows/shadows in Illustrator. After making them, I imported them into XD. 

Others in my class chose to do scroll cards, while some wanted to flip. Additionally, I knew early on that I wanted buttons to take through the cards, including the flip button. This influenced the way my flashcards would navigate. I began with the home page, which led to an explanation of the button, and then the first choice was HTML or CSS. Once you choose which side you want to use, it will be followed by the indexes. The card navigation was more complicated because I wanted to go between the term, the definition, and an example. The image below shows my final navigation map.

The building process was complex due to not finishing my final design and continuing to make changes and add in pages before moving on to the wiring. I wired it completely 2 or 3 times before finally landing on my final design. Placing wires can get rather tedious, but I enjoy doing it. Placing each wire and running tests makes the app come to life and feel natural. There is something that makes me so proud when it gets to the point where it works the way it should.

I learned so much from this project. I had rarely used shadows and inner glows, but with this project, I knew in detail how to use both tools. In addition to that, I gained more knowledge in XD and wiring. This project was mainly left open-ended in figuring out what I wanted to do regarding the functionality of my flashcard. This openness allowed me to experiment in XD, where most of my newly gained knowledge came from.